<script lang="ts" setup>
import { isEqual } from "lodash-es"
import { ref, watch,onMounted } from "vue"
import { isEmpty } from "xe-utils"

interface Props<T = any> {
  isOther?: boolean
  tag: string
  name: string
  description?: string
  createBy: string
  createTime: string
  selected: boolean
  data: T
  isDownload?: boolean
  isView?: boolean
  isDelete?: boolean
  showTag?: boolean
  showName?: boolean
  isSaveAs?: boolean
  isPublish?: boolean
  otherParams?: {
    [propName: string]: string
  }
}

const props = withDefaults(defineProps<Props>(), {
  isDownload: true,
  isView: true,
  isDelete: true,
  showTag: true,
  showName: true
})
const emit = defineEmits(["handleView", "handleDownload", "handleDelete", "handleSaveAs", "handlePublish", "toggleSelect"])

const checkboxValue = ref<boolean>()

function handleView() {
  emit("handleView", props.data)
}
function handleDownload() {
  emit("handleDownload", props.data)
}
function handleDelete() {
  emit("handleDelete", props.data)
}
function handleChangeSelect() {
  emit("toggleSelect", props.data)
}
function handleSaveAs() {
  emit("handleSaveAs", props.data)
}
function handlePublish() {
  emit("handlePublish", props.data)
}

watch(
  () => props.selected,
  () => {
    checkboxValue.value = props.selected
  }
)
</script>

<template>
  <el-card :class="showName ? 'card-item' : 'card-item-moren'" :body-class="showName ? 'card-item body' : ''"
    @click.stop="handleView">
    <div class="card-header">
      <div class="card-header-title">
        <el-icon>
          <ElementPlus v-if="isOther" />
          <UserFilled v-else />
        </el-icon>
        <span class="card-header-title__title" :title="props.createBy">{{ props.createBy }}</span>
      </div>
      <el-checkbox v-model="checkboxValue" @click.stop @change="handleChangeSelect" />
    </div>
    <div class="card-body flex-column">
      <div class="flex-start gap" :style="{ 'margin-bottom': showName ? '10px' : '0px' }">
        <el-tag v-if="showTag" type="primary" class="card-tag">
          <div class="card-tag-text" :title="props.tag">
            {{ props.tag === '""' ? "" : props.tag }}
          </div>
        </el-tag>
        <el-text v-if="showName" truncated :title="props.name">
          {{ props.name }}
        </el-text>
      </div>
      <p class="describe" :title="props.description">
        {{ isEmpty(props.description) || isEqual("null", props.description) ? "" : props.description }}
      </p>
    </div>
    <div class="card-footer">
      <div class="title">
        <el-icon color="#6B98D7">
          <Calendar />
        </el-icon>
        <span>{{ isEmpty(props.createTime) ? props.otherParams?.createTime : props.createTime }}</span>
      </div>
      <div class="operate" @click.stop>
        <el-dropdown trigger="click">
          <el-link :underline="false">
            <el-icon>
              <MoreFilled />
            </el-icon>
          </el-link>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="isView">
                <template #default>
                  <el-link :underline="false" title="" @click.stop="handleView()">
                    <el-icon :size="18">
                      <View />
                    </el-icon>
                    查看
                  </el-link>
                </template>
              </el-dropdown-item>
              <el-dropdown-item v-if="isDownload">
                <template #default>
                  <el-link :underline="false" @click.stop v-throttle="() => handleDownload()">
                    <el-icon :size="18">
                      <Download />
                    </el-icon>
                    下载
                  </el-link>
                </template>
              </el-dropdown-item>
              <el-dropdown-item v-if="isSaveAs">
                <template #default>
                  <el-link :underline="false" title="" @click.stop="handleSaveAs()">
                    <el-icon :size="18">
                      <DocumentAdd />
                    </el-icon>
                    另存为
                  </el-link>
                </template>
              </el-dropdown-item>
              <el-dropdown-item v-if="isPublish">
                <template #default>
                  <el-link :underline="false" title="" @click.stop="handlePublish()">
                    <el-icon :size="18">
                      <Position />
                    </el-icon>
                    发布
                  </el-link>
                </template>
              </el-dropdown-item>
              <el-dropdown-item v-if="isDelete">
                <template #default>
                  <el-link :underline="false" title="" type="danger" @click.stop="handleDelete()">
                    <el-icon :size="18">
                      <Delete />
                    </el-icon>
                    删除
                  </el-link>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
@import "@@/assets/styles/mixins.scss";

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.card-header-title {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0px;
  gap: 8px;

  .card-header-title__title {
    flex: 1;
    @extend %ellipsis;
  }
}

.el-checkbox {
  height: auto !important;
}

:deep(.el-card__body) {
  --el-card-padding: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.describe {
  display: -webkit-box;
  /* 必须结合 -webkit-line-clamp 使用 */
  -webkit-box-orient: vertical;
  /* 设置盒子方向为垂直 */
  -webkit-line-clamp: 2;
  /* 显示的行数 */
  overflow: hidden;
  /* 隐藏超出的内容 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  white-space: normal;
  /* 允许文本换行 */
  margin: 0;
  color: rgba(250, 250, 250, 0.8);
  line-height: 22px;
  font-size: 12px;
}

.card-item-moren {
  cursor: pointer;
  background-image:
    url("@@/assets/images/scn/moren.png"),
    linear-gradient(180deg, rgb(1, 15, 28) 0%, rgb(11, 33, 59) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
</style>
